<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/26
  Time: 15:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>发行地区管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="<%=request.getContextPath()%>/static/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/css/bootstrap.css" />
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/button.css" />
    <script type="text/javascript">
        var system ={};
        var p = navigator.platform;
        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
        if(system.win||system.mac||system.xll){//如果是电脑跳转到
            window.location.href="#";
        }else{  //如果是手机,跳转到
            window.location.href="${pageContext.request.contextPath}/index.jsp";
        }
    </script>
    <style type="text/css">

    </style>
</head>

<body>

<!-- 导航条-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">切换导航栏</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="padding: 0px;">

            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <p class="nav navbar-text"><span>管理员：${admin.adminName}</span></p>
                <p class="nav navbar-text"><span id="times"></span></p>
                <a class="nav navbar-text" href="${pageContext.request.contextPath}/admin/adminMainView"><span class="glyphicon glyphicon-home">首页</span></a>
                <button class="btn btn-danger navbar-btn" id="logout">
                    <span class="glyphicon glyphicon-off"></span>退出登录
                </button>
            </ul>

        </div>

    </div>
</nav>

<!-- 主体部分 -->
<div class="container-fluid">
    <div class="row">

        <!--左边部分 -->
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <!-- 头像 -->
                    <div class="top-section" id="headPicture">
                        <div class="profile-image">
                            <a href="${pageContext.request.contextPath}/admin/adminDetails">
                                <img src="${admin.picture}" class="img-circle center-block" width="150px" height="150px">
                            </a>
                        </div>
                        <div class="profile-content">
                            <h3 class="profile-title text-center">${admin.adminName}</h3>
                            <p class="profile-description text-center">${admin.signature}</p>
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                        <div class="panel panel-default" id="bodyList">
                            <div class="list-group">
                                <a href="${pageContext.request.contextPath}/user/users" class="list-group-item text-center">二次元用户管理</a>
                                <a href="${pageContext.request.contextPath}/anime/animes" class="list-group-item text-center">动漫信息管理</a>
                                <a href="${pageContext.request.contextPath}/region/regions" class="list-group-item text-center">发行地区管理</a>
                                <a href="${pageContext.request.contextPath}/type/types" class="list-group-item text-center">动漫类型管理</a>
                                <a href="${pageContext.request.contextPath}/enshrine/enshrines" class="list-group-item text-center">追番管理</a>
                                <a href="${pageContext.request.contextPath}/comment/comments" class="list-group-item text-center">评论管理</a>
                                <a href="${pageContext.request.contextPath}/admin/adminDetails" class="list-group-item text-center">编辑个人资料</a>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="panel-footer">
                    <div class="box bg-1">
                        <button class="button button--antiman button--round-l button--text-medium" onclick="window.open('${pageContext.request.contextPath}/index.jsp')"><span>转到前台</span></button>
                    </div>
                </div>
            </div>

        </div>


        <!--右边部分 -->
        <div class="col-md-9">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <br />
                    <div class="row">
                        <div class="col-lg-9 col-sm-9 col-xs-9">
                            <div class="btn-toolbar" role="toolbar">
                                <div class="btn-group" role="group">
                                    <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-whatever="添加发行地区"><span class="glyphicon glyphicon-plus"></span>添加</button>
                                </div>

                            </div>

                        </div>

                        <div class="col-lg-3 col-sm-3 col-xs-3">
                            <div>
                                <h4 style="color: #2aabd2;font-style: revert">发行地区管理</h4>
                            </div>
                        </div>
                    </div>


                </div>

                <div class="panel-body">
                    <table class="table nth-child table-bordered table-hover" id="tab">
                        <thead>
                        <tr>
                            <th class="text-center">类型id</th>
                            <th class="text-center">类型名称</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>

                        <tbody id="tbody">

                        </tbody>
                    </table>
                </div>

                <div class="panel-footer clearfix">
                    <%--    分页--%>
                    <div class="row">
                        <div class="col-md-6" id="page_info_area">

                        </div>
                        <div class="col-md-6" id="page_nav_area">

                        </div>

                    </div>

                </div>


            </div>

        </div>

    </div>
</div>

<!--增加、修改、查看详情弹框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" id="Form">

                    <div class="form-group" style="display: none;">
                        <label for="regionId" class="col-sm-3 control-label">发行地区ID：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" placeholder="" name="regionId" id="regionId">
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="regionName" class="col-sm-3 control-label">发行地区名称：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入发行地区名称" name="regionName" id="regionName">
                        </div>

                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary save" id="save">确定</button>
                <button type="button" class="btn btn-primary update " style="display: none;">修改</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    //得到时间并写入div
    function getDate(){
        //获取当前时间
        var date = new Date();
        //格式化为本地时间格式
        var date1 = date.toLocaleString();
        //获取div
        var span = document.getElementById("times");
        //将时间写入div
        span.innerHTML = date1;
    }
    //使用定时器每秒向div写入当前时间
    setInterval("getDate()",1000);

    $(function () {
        //弹窗部分
        $('#exampleModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var recipient = button.data('whatever');

            var modal = $(this);
            modal.find('.modal-title').text(recipient);
//				modal.find('.modal-body input').val(recipient);
        })

        to_page(1);

        /*数据回显*/
        $(document).on("click", "#update", function() {
            //获取当前修改行的id
            var regionId = $(this).parents("tr").data("id");
            console.log("regionId"+regionId);
            var _this = $(this);

            $(".divHide").show();
            $(".update").show();
            $("#save").hide();


            $.post("${pageContext.request.contextPath}/region/regionBy", {
                regionId: regionId
            }, function(data) {
                console.log(data);
                //将后台返回的数据给对应的表单元素赋值
                $("#regionId").val(data.data.regionId);
                $("#regionName").val(data.data.regionName);

            }, "json")
        });

        /*修改操作*/
        $(document).on("click", ".update", function() {
            console.log($("#Form").serialize());

            $.ajax({
                type: "POST",
                data: $("#Form").serialize(),
                url: "${pageContext.request.contextPath}/region/updateAnimeRegion",
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    if(data.code == 200) {
                        alert(data.msg);
                        $("#myModalLabel").modal("hide");
                        window.location.reload();
                    } else {
                        alert(data.msg);
                    }

                }
            })
        });

        //添加
        $(document).on("click", "#save", function() {
            console.log($("#Form").serialize());

            $.ajax({

                type: "POST",
                url: "${pageContext.request.contextPath}/region/addAnimeRegion",
                data: JSON.stringify({regionName:$("#regionName").val()}),
                contentType:"application/json;charset=utf-8",
                success: function(data) {

                    if(data.code == 200) {
                        alert(data.msg);
                        $("#myModalLabel").modal("hide");
                        window.location.reload();
                    } else {
                        alert(data.msg);
                    }
                }
            }, "json");
        });

        //删除
        $(document).on("click", "#del", function() {
            var regionId = $(this).parents("tr").data("id");
            console.log(regionId);

            var _this = $(this);
            if(confirm('是否要删除？')) {

                $.ajax({
                    type: "POST",
                    data: JSON.stringify({regionId: regionId}),
                    url: "${pageContext.request.contextPath}/region/delAnimeRegion",
                    contentType:"application/json;charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        alert(data.msg);
                        window.location.reload();
                    }
                })
            }
        })

        //退出登录
        $(document).on("click", "#logout", function() {
            if(confirm('是否要退出登录？')) {
                $.get(
                    "${pageContext.request.contextPath}/admin/logout",
                    function(data) {
                        window.location.reload();
                    }, "json")
            }
        })


    })

    function appendHtml(result) { //此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
        $("#tab tbody").empty();//清空上一页的数据
        console.log(result);
        //遍历json数据
        var tr = "";
        $.each(result.pageInfo.list, function(index, item) {
            tr += "<tr class='text-center' data-id='" + item.regionId + "' >";

            tr += '<td class="text-center">' + item.regionId + '</td>';
            tr += '<td class="text-center">' + item.regionName + '</td>';

            tr += '<td><div style="margin-left: 14%;"><button class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" data-whatever="修改发行地区" id="update"><span class="glyphicon glyphicon-edit" ></span>修改</button><button class="btn btn-warning" id="del"><span class="glyphicon glyphicon-remove"></span>删除</button></div></td>';

            tr += "</tr>";
        });

        $("#tab").append(tr);
    }

    function to_page(pn) {
        $.ajax({
            url:"${pageContext.request.contextPath}/region/animeRegionList",
            data:"pn="+pn,
            type:"GET",
            success:function (result) {
                appendHtml(result);
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }

    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前"+result.pageInfo.pageNum+"页，总"+result.pageInfo.pages+"页，总"+result.pageInfo.total+"条记录");
        totalRecord = result.pageInfo.total;
        currentPage = result.pageInfo.pageNum;
    }

    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageli =  $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.pageInfo.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageli.addClass("disabled");
        }else {
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageli.click(function () {
                to_page(result.pageInfo.pageNum -1);
            });
        }



        var nextPageli =  $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(result.pageInfo.hasNextPage == false){
            nextPageli.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageli.click(function () {
                to_page(result.pageInfo.pageNum +1);
            });

            lastPageLi.click(function () {
                to_page(result.pageInfo.pages);
            });
        }


        ul.append(firstPageLi).append(prePageli)
        $.each(result.pageInfo.navigatepageNums,function (index,item) {

            var numLi =  $("<li></li>").append($("<a></a>").append(item));
            if(result.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageli).append(lastPageLi);

        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }


</script>

</html>
